<template>
  <div class="authentication same-change-oldstyle">
     <div class="same-head-box">
        <div class="saem-seat-box">
          <div class="saem-seat-left">
            <span>当前位置：</span>
             <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>设置</el-breadcrumb-item>
              <el-breadcrumb-item>认证信息</el-breadcrumb-item>
            </el-breadcrumb>
            </div>
          <div class="saem-seat-right">
            <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
            <!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
          </div>
        </div>
      </div>
    
    <div class="wrap">
      <h4 class="four">
        <template v-if="type===0">实名认证</template>
        <template v-if="type===1">个人认证</template>
        <template v-if="type===2">企业认证</template>
      </h4>
      <template v-if="type===0">
        <router-link to="/personal">
          <div class="card-box">
            <div class="gray-bg">
              <img src="/static/images/icon-personal.png" class="icon-personal" alt />
            </div>
            <div class="words">
              <span class="large">个人认证</span>
              <span class="small">请上传身份证的正反面</span>
            </div>
            <div class="arrow"></div>
          </div>
        </router-link>
        <router-link to="/enterprise">
          <div class="card-box">
            <div class="gray-bg">
              <img src="/static/images/icon-enterprise.png" class="icon-enterprise" alt />
            </div>
            <div class="words">
              <span class="large">企业认证</span>
              <span class="small">请上传营业执照</span>
            </div>
            <div class="arrow"></div>
          </div>
        </router-link>
      </template>
      <template v-if="type===1">
        <div class="truth-card">
          <el-image class="user-pic" :src="info.personal_ID_card_head_img_link" fit="scale-down" lazy
            :preview-src-list="[info.personal_ID_card_head_img_link,info.personal_ID_card_national_emblem_link]">
          </el-image>
          <div class="truth-info">
            <div class="t-title">认证信息</div>
            <div class="t-txt">个人姓名：{{info.personal_name}}</div>
            <div class="t-txt">身份证号：{{hidden(info.personal_ID_card,8,4)}}</div>
            <div class="t-txt">认证类型：个人 <span class="edit" v-if="info.status==3"
                @click="editPersonal(info.id)">修改实名认证</span>
              <el-popover v-if="info.status==3 && info.refuse_reson" placement="top-start" width="200" trigger="hover"
                :content="info.refuse_reson">
                <span class="reference" slot="reference">驳回原因</span>
              </el-popover>
            </div>
          </div>

          <img class="authentic" v-if="info.status==1" src="/static/images/authen-checking.png" alt="">
          <img class="authentic" v-if="info.status==2" src="/static/images/authen-success.png" alt="">
          <img class="authentic" v-if="info.status==3" src="/static/images/authen-fail.png" alt="">
        </div>
      </template>

      <template v-if="type===2">
        <div class="truth-card">
          <el-image class="user-pic" :src="info.company_business_license_link" fit="scale-down" lazy
            :preview-src-list="[info.company_business_license_link]">
          </el-image>
          <div class="truth-info">
            <div class="t-title">认证信息</div>
            <div class="t-txt">公司名称：{{info.company_name}}</div>
            <div class="t-txt">法人代表：{{info.company_representative}}</div>
            <div class="t-txt">信用代码：{{hidden(info.company_number,6,4)}}</div>
            <div class="t-txt">认证类型：企业 <span class="edit" v-if="info.status==3"
                @click="editCompany(info.id)">修改实名认证</span>
                <el-popover v-if="info.status==3 && info.refuse_reson" placement="top-start" width="200" trigger="hover"
                :content="info.refuse_reson">
                <span class="reference" slot="reference">驳回原因</span>
              </el-popover>
              </div>
          </div>
          <img class="authentic" v-if="info.status==1" src="/static/images/authen-checking.png" alt="">
          <img class="authentic" v-if="info.status==2" src="/static/images/authen-success.png" alt="">
          <img class="authentic" v-if="info.status==3" src="/static/images/authen-fail.png" alt="">
        </div>
      </template>
    </div>
  </div>
</template>
<script>
  export default {
    name: "authentication",
    data() {
      return {
        type: "", //0 未认证  1个人 2公司
        info: {},
      };
    },
    computed: {

    },

    created() {
      this.getAuthentication();
    },
    inject: ["reload"],
    methods: {
      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload();
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },

      editPersonal(id) {
        this.$router.push({
          path: "/personal",
          query: { id }
        });
      },

      editCompany(id) {
        this.$router.push({
          path: "/enterprise",
          query: { id }
        });
      },


      //str：要进行隐藏的变量  frontLen: 前面需要保留几位    endLen: 后面需要保留几位
      hidden(str, frontLen, endLen) {    //
        var len = str.length - frontLen - endLen;
        var xing = '';
        for (var i = 0; i < len; i++) {
          xing += '*';
        }
        return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
      },

      getAuthentication() {
        this.$post({
          url: "Partner/Setup/get_authentication",
          success: res => {
            if (res.code == 1000) {
              if (res.data) {
                this.info = res.data;
                this.type = parseInt(res.data.type);
              } else {
                this.type = 0;
              }

            } else {
              this.$message.error(res.message);
            }
            console.log(res);
          }
        })
      }
    },
  };
</script>
<style scoped>
  .wrap {
    padding: 0 40px;
  }

  .card-box {
    position: relative;
    width: 550px;
    height: 90px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 3px 0px rgba(44, 85, 134, 0.6);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    margin-left: 50px;
    margin-top: 12px;
  }

  .card-box:first-child {
    margin-top: 50px;
  }

  .gray-bg {
    width: 100px;
    height: 100%;
    background: rgba(161, 161, 161, 1);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon-personal {
    width: 68px;
    height: 45px;
  }

  .icon-enterprise {
    width: 66px;
    height: 47px;
  }

  .words {
    display: flex;
    flex-flow: wrap column;
    justify-content: center;
    margin-left: 20px;
  }

  .words span {
    display: block;
    color: #333333;
  }

  .large {
    font-size: 15px;
    font-weight: bold;
  }

  .small {
    margin-top: 5px;
    font-size: 10px;
  }

  .arrow:before {
    content: " ";
    height: 12px;
    width: 12px;
    border-width: 3px 3px 0 0;
    border-color: #5c5c5c;
    border-style: solid;
    -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
    transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 27px;
  }

  .truth-card {
    width: 800px;
    height: 180px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 3px 0px rgba(23, 23, 23, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    position: relative;
  }

  .truth-info {
    margin-left: 20px;
    display: flex;
    flex-flow: wrap column;
    justify-content: space-between;
    height: 150px;
  }

  .user-pic {
    width: 200px;
    height: 150px;
  }

  .t-title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .t-txt {
    color: #666666;
    font-size: 15px;
    margin-top: 5px;
  }

  .edit {
    color: #2C5586;
    cursor: pointer;
    margin-left: 20px;
  }

  .authentic {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100px;
  }

  .reference {
    margin-left: 20px;
  }
</style>
